<template>
   <div class="detail-bottom-left">
       <div class="fenlei">
           <h1>相关分类</h1>
       </div>
       <div class="slide">
           <p @click="slide(1)"><span>定制橱柜</span> <i :class="this.check==true?'el-icon-caret-top':'el-icon-caret-bottom'"></i></p>
            <div class="show" v-show="this.check">
                <router-link
                tag="a" target="_blank" 
                :to="{name:'productList', params: {style:'现代风格',name:'橱柜'}}" 
                >现代风格</router-link>
                <router-link
                tag="a" target="_blank"
                :to="{name: 'productList', params: {style:'欧式风格',name:'橱柜'}}" 
                >欧式风格</router-link>
                <router-link 
                tag="a" target="_blank"
                :to="{name: 'productList', params: {style:'美式风格',name:'橱柜'}}" 
                >美式风格</router-link>
                <router-link
                tag="a" target="_blank"
                :to="{name: 'productList', params: {style:'中式风格',name:'橱柜'}}" 
                >中式风格</router-link>
            </div>
       </div>
       <div class="slide">
           <p @click="slide(2)"><span>定制衣柜</span> <i :class="this.check2==true?'el-icon-caret-top':'el-icon-caret-bottom'"></i></p>
            <div class="show" v-show="this.check2">
                <router-link 
                tag="a" target="_blank"
                :to="{name:'productList', params: {style:'现代风格',name:'衣柜'}}" 
                >现代风格</router-link>
                <router-link 
                tag="a" target="_blank"
                :to="{name: 'productList', params: {style:'欧式风格',name:'衣柜'}}" 
                >欧式风格</router-link>
                <router-link 
                tag="a" target="_blank"
                :to="{name: 'productList', params: {style:'美式风格',name:'衣柜'}}" 
                >美式风格</router-link>
                <router-link 
                tag="a" target="_blank"
                :to="{name: 'productList', params: {style:'中式风格',name:'衣柜'}}" 
                >中式风格</router-link>
            </div>
       </div>

        <!-- <div class="fenlei fenlei2" 
       >
           <h1>热销排行榜</h1>
           <router-link 
           tag="a" target="_blank"
            :to="{name: 'productDetail', params: {id:item.id}}" 
            class="hot-item"
            v-for="(item,index) of litter" 
            :key="item.id" >
                <div class="num" v-if="index<=2">{{index+1}}</div>
               <div>
                   <img :src="item.main_img_url" alt="">
               </div>
               <p>{{item.name}}</p>
           </router-link>
           
       </div> -->

        <fen-lei :litter="this.litter"></fen-lei>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
import FenLei from "./LeftFenlei.vue"

export default {
  name: 'productDetail-bottom',
  components:{
    FenLei
  },
  props:{
     
     prodcutName:String
  },
  data () {
    return {
        check:false,
        check2:false,
        litter:[]
    }
  },
  watch:{
    prodcutName(){
    //    console.log(this.prodcutName)
       this.getInfo()
    }
  },
  computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
      
    
  },
  methods:{
        slide(id){
            if(id===1){
                this.check = !this.check;
            }else if(id==2){
                this.check2 = !this.check2;
            }
            
            // console.log(this.check)
        },
        getInfo(){
     
            axios.get(this.baseUrl+'product/to_index_product',
                {
                    params:{
                            categoryName:this.prodcutName
                            }                 
                }
            )
        .then(this.getInfoSucc)
        },
        getInfoSucc(response){
            this.litter = response.data.litter          
        }
  }
 
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
.detail-bottom-left
    width 300px
.fenlei
    border 1px solid #e3e4e6
.fenlei>h1
    border-bottom 1px solid #e3e4e6
    height 68px
    line-height 68px
    font-size 20px
    text-indent 30px
    background #f2f2f2
.slide
    
    border 1px solid #e3e4e6
.slide>p
    cursor pointer
    width 250px
    overflow hidden
    font-size 16px
    margin-left 30px
  
    padding 20px 0
.slide>p>span
    float left
    font-size 16px
.slide>p>i
    float right   
.show 
    overflow hidden
    margin-left 30px 
    transition all 0.3s
.show>a
    float left
    color #666666
    font-size 12px
    margin-right 60px
    padding 10px 0
.fenlei2
 margin-top 30px
 .fenlei2>a
    display block
    width 100%
.hot-item 
    position relative
    display block
.num 
    position absolute
    width 40px!important
    height 30px!important
    line-height 30px
    font-size 16px
    background #10abbe
    left 20px 
    top 10px
    margin 0!important
    text-align center
.hot-item>div
    width 280px
    height 210px
    margin 10px
    overflow hidden
.hot-item>div>img
    width 100%
.hot-item>p
    width 100%
    height 70px
    line-height 70px
    text-align center
    font-size 16px
    color #333333
</style>
